import React, { useState, useMemo, useEffect } from 'react';
import { obj_str, ColView, filter_list, useHigh, GridTable, filter_row, useCmd, WaitUmd, MainView, show_mt, BtTxt, uReal, cline, obj_int,
    KFind, useKForm, PanelFind, Btn, is_empty, loc } from 'sui';
import { fix_col, load_col } from './cmd';
import { DlgVal, DlgBack } from './ctl';
import { useAccess, User } from 'cache';

const BaseView = ({ mod, submod, title, acc }) => {
    const [row, setRow] = useState();
    const [open_val, openVal] = useState(false);
    const [open_back, openBack] = useState(false);
    const [col, setCol] = useState();
    const [high] = useHigh(140, 100);
    const [no_acc] = useAccess();
    const umd = useCmd(`${mod}/list`);
    const form = useKForm();

    useEffect(() => {
        load_col(mod, setCol);
    }, [mod]);

    useEffect(() => {
        if (is_empty(umd.value)) {
            setRow(null);
            return;
        }

        const mt = obj_str(form.value, "mt");
        if (!mt) {
            setRow(umd.value);
            return;
        }

        const f = umd.value.filter(d => d.mt === mt);
        setRow(f);
    }, [umd.value, form.value]);

    const getRow = useMemo(() => {
        const lst = filter_list(["sn"], col);
        return filter_row(row, lst, umd.filter);
    }, [row, umd.filter, col]);


    const hreturn = () => {
        load_col(mod, setCol);
        umd.hreturn();
    };

    if (umd.isFin("col")) {
        const list = [
            {sn: mod, name: title, fix: fix_col()},
        ];

        return <ColView hreturn={hreturn} title={title} subtitle={loc("l_221")} list={list} cur={mod}/>;
    }

    const act = {
        "scrap": d => {
            const cmd = {
                line: cline(),
                usn: User.userName(),
                uname: User.uName(),
                side: submod,
                mt: obj_str(umd.cur, "mt"),
                sn: obj_str(umd.cur, "sn"),
                num: obj_int(d, "num"),
                des: obj_str(d, "des"),
            };

            umd.startWait();
            uReal(null, "side/scrap", cmd, r => umd.reload(umd.endWait), e => umd.setErr());
        }
    };

    const pact = {
        "scrap": v => openVal(true),
    };

    const getCol = () => {
        if (is_empty(col)) {
            return null;
        }

        const tmp = [
            {name: loc("l_193"), key: 'index', width: 70, frozen: true},
            {name: loc("l_238"), key: 'e_opt', width: 100, export: false, formatter: props => {
                const d = props.row;
                return (
                    <div className="inline-flex">
                        <BtTxt hcmd={() => umd.pact(pact, d, "scrap")} disabled={no_acc(acc)}>{loc("l_711")}</BtTxt>
                    </div>
                );
            }},
        ];

        col.forEach(d => show_mt(tmp, d, 150));

        return tmp;
    };

    const Right = () => (
        <div className="inline-flex">
            <Btn className="mr-4" hcmd={() => umd.pact(null, null, "col")} disabled={no_acc(acc)}>{loc("l_221")}</Btn>
        </div>
    );

    const mt_lst = [
        {sn: "G", name: loc("l_712")},
        {sn: "T", name: loc("l_713")},
        {sn: "C", name: loc("l_528")},
        {sn: "S", name: loc("l_529")},
    ];

    return (
        <MainView>
            <PanelFind left={title} right={<Right/>} hcmd={v => umd.setFilter(v)}>
                <div className="inline-flex items-center">
                    <KFind label={loc("l_229")} form={form} name="mt" margin="dense" width="w-56" list={mt_lst}/>
                    <Btn className="ml-4" hcmd={() => form.clear_all()}>{loc("l_543")}</Btn>
                </div>
            </PanelFind>
            <GridTable col={getCol()} row={getRow} high={high}/>
            <DlgVal open={open_val} hcmd={v => umd.act(act, v)} setOpen={openVal} data={umd.cur} main={umd.value}/>
            <DlgBack open={open_back} hcmd={v => umd.act(act, v)} setOpen={openBack} data={umd.cur} main={umd.value}/>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {BaseView};
